<template name="skeletonCategory">
    <view class="sk-container tabbar_padding_b" @touchmove.stop.prevent="() => {}">
        <view class="skeleton_loading"></view>
        <u-navbar :placeholder="true">
            <template #left>
                <view class="nav_title"></view>
            </template>
        </u-navbar>
        <view class="group1">
            <view class="group1_l"> </view>
            <view class="group1_r">
                <view class="group1_r_t"></view>
                <view class="group1_r_b"></view>
            </view>
        </view>
        <view class="group_container">
            <view class="group2">
                <view class="group2_t"></view>
                <view class="group2_b"></view>
            </view>
            <view class="group3">
                <view class="group3_t">
                    <view class="group3_t_l"></view>
                    <view class="group3_t_r"></view>
                </view>
                <view class="group3_b">
                    <view class="group3_b_item" v-for="i in 5" :key="`g${i}`">
                        <view class="group3_b_item_t"></view>
                        <view class="group3_b_item_b"></view>
                    </view>
                </view>
            </view>
            <view class="group4">
                <view class="group4_t"></view>
                <view class="group4_b">
                    <view class="group4_b_item" v-for="i in 3" :key="`h${i}`">
                        <view class="group4_b_item_t"></view>
                        <view class="group4_b_item_b"></view>
                    </view>
                </view>
            </view>
            <view class="group5" v-for="i in 5" :key="`5${i}`">
                <view class="group_c"></view>
            </view>
        </view>
    </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.nav_title {
    width: 80rpx;
    height: 45rpx;
    background-color: #eeeeee;
}
.group_container {
    padding: 0 29rpx;
}
.group1 {
    padding-left: 29rpx;
    padding-top: 38rpx;
    padding-bottom: 40rpx;
    background-color: #fff;
    display: flex;
    .group1_l {
        width: 109rpx;
        height: 109rpx;
        border-radius: 50%;
        margin-right: 22rpx;
        background-color: #eeeeee;
    }
    .group1_r {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .group1_r_t {
            width: 196rpx;
            height: 33rpx;
            margin-bottom: 18rpx;
            background-color: #eeeeee;
        }
        .group1_r_b {
            width: 134rpx;
            height: 36rpx;
            border-radius: 18rpx;
            background-color: #eeeeee;
        }
    }
}
.group2 {
    padding: 29rpx;
    margin-bottom: 29rpx;
    background-color: #fff;
    .group2_t {
        width: 100%;
        height: 40rpx;
        margin-bottom: 18rpx;
        background-color: #eeeeee;
    }
    .group2_b {
        width: 100%;
        height: 30rpx;
        background-color: #eeeeee;
    }
}
.group3 {
    padding: 29rpx;
    margin-bottom: 29rpx;
    background-color: #fff;
    .group3_t {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40rpx;
        .group3_t_l {
            width: 116rpx;
            height: 29rpx;
            background-color: #eeeeee;
        }
        .group3_t_r {
            width: 51rpx;
            height: 25rpx;
            background-color: #eeeeee;
        }
    }
    .group3_b {
        display: flex;
        justify-content: space-between;
        .group3_b_item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .group3_b_item_t {
                width: 43rpx;
                height: 43rpx;
                margin-bottom: 18rpx;
                background-color: #eeeeee;
            }
            .group3_b_item_b {
                width: 76rpx;
                height: 25rpx;
                background-color: #eeeeee;
            }
        }
    }
}
.group4 {
    padding: 29rpx;
    margin-bottom: 29rpx;
    background-color: #fff;
    .group4_t {
        width: 116rpx;
        height: 29rpx;
        margin-bottom: 38rpx;
        background-color: #fff;
    }
    .group4_b {
        display: flex;
        .group4_b_item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-right: 76rpx;
            .group4_b_item_t {
                width: 58rpx;
                height: 58rpx;
                margin-bottom: 18rpx;
                background-color: #eeeeee;
            }
            .group4_b_item_b {
                width: 101rpx;
                height: 25rpx;
                background-color: #eeeeee;
            }
        }
    }
}
.group5 {
    padding: 29rpx;
    margin-bottom: 18rpx;
    background-color: #fff;
    .group_c {
        width: 100%;
        height: 40rpx;
        background-color: #eeeeee;
    }
}
.sk-container {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    // background-color: #fff;
    background-color: transparent;
}
</style>
